<template>
  <div class="edit-page-wrap">
    <Head title="密钥信息">
      <template #content>
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="130px"
          class="edit-form-wrap"
        >
          <el-form-item label="企业类型" prop="type">
            <el-radio-group
              v-model="ruleForm.type"
              v-for="(item, index) in optionsS.cecOrgType"
              :key="index"
              @change="changeCompanyType"
            >
              <el-radio :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="企业名称" prop="orgId">
            <qc-select
              :value="ruleForm.orgId"
              :options="optionsS.orgData"
              placeholder="请选择企业名称"
              @change="handleChangeOrg"
            >
            </qc-select>
          </el-form-item>
          <el-form-item label="企业密钥" prop="orgKey">
            <el-input
              v-model.trim="ruleForm.orgKey"
              placeholder="请输入企业密钥"
              maxlength="200"
              clearable
            />
          </el-form-item>
          <el-form-item label="消息密钥" prop="msgKey">
            <el-input
              v-model.trim="ruleForm.msgKey"
              placeholder="请输入消息密钥"
              maxlength="200"
              clearable
            />
          </el-form-item>
          <el-form-item label="初始化向量" prop="initVector">
            <el-input
              v-model.trim="ruleForm.initVector"
              placeholder="请输入初始化向量"
              maxlength="200"
              clearable
            />
          </el-form-item>
          <el-form-item label="签名密钥" prop="signKey">
            <el-input
              v-model.trim="ruleForm.signKey"
              placeholder="请输入签名密钥"
              maxlength="200"
              clearable
            />
          </el-form-item>
          <el-form-item label="互联互通方接口url" prop="requestUrl">
            <el-input
              v-model.trim="ruleForm.requestUrl"
              placeholder="请输入互联互通方接口url"
              maxlength="200"
              clearable
            />
          </el-form-item>
        </el-form>
      </template>
    </Head>
    <div class="edit-btn-wrap">
      <el-button type="primary" plain @click="back">取消</el-button>
      <el-button type="primary" v-btnAntiShake="onSubmit">保存</el-button>
    </div>
  </div>
</template>
  
  <script lang="ts" setup>
import { FormInstance, FormRules } from 'element-plus';
import Head from '@/components/head/index.vue';
import {
  saveCecConfig,
  updateCecConfig,
  queryCecConfig,
} from '@/service/apis/docking';
import { queryAllFlow } from '@/service/apis/org';
import { queryDicByParent } from '@/service/apis/api';

const router = useRouter();
const route = useRoute();
const {
  query: { id },
} = route;
const ruleFormRef = ref<FormInstance>();

const optionsS = reactive({
  orgData: [] as any,
  cecOrgType: [] as any,
});

let ruleForm: any = reactive({
  id: id,
  type: '0',
  orgId: [] as any,
  orgKey: '',
  msgKey: '',
  initVector: '',
  signKey: '',
  requestUrl: '',
});
const rules = reactive<FormRules>({
  type: [{ required: true, message: '请选择企业类型', trigger: 'change' }],
  orgId: [{ required: true, message: '请选择企业名称', trigger: 'change' }],
  orgKey: [{ required: true, message: '请输入企业密钥', trigger: 'blur' }],
  msgKey: [{ required: true, message: '请输入消息密钥', trigger: 'blur' }],
  initVector: [
    { required: true, message: '请输入初始化向量', trigger: 'blur' },
  ],
  signKey: [{ required: true, message: '请输入签名密钥', trigger: 'blur' }],
  requestUrl: [
    { required: true, message: '请输入互联互通方接口url', trigger: 'blur' },
  ],
});

const back = () => {
  router.go(-1);
};

queryDicByParent({
  listDtos: ['cecOrgType'],
}).then((res: any) => {
  optionsS.cecOrgType = res.cecOrgType;
});

// 更改企业类型
const changeCompanyType = (e: any) => {
  console.log(e);
  ruleForm.type = e;
  ruleForm.orgId = '';
  getOrgs();
};

// 获取企业名称
const getOrgs = () => {
  console.log(ruleForm.type);
  queryAllFlow({
    type: ruleForm.type,
  }).then((res: any) => {
    if (res) {
      optionsS.orgData = res.listMap;
    }
  });
};
const handleChangeOrg = async (e: any) => {
  ruleForm.orgId = e;
};
// 详情赋值
if (id) {
  queryCecConfig({ id }).then((res: any) => {
    if (res) {
      for (const key in ruleForm) {
        if (res[key]) {
          ruleForm[key] = res[key];
        }
      }
      getOrgs();
    }
  });
} else {
  getOrgs();
}

// 提交
const emit = defineEmits(['clear-cache']);
const onSubmit = async () => {
  console.log(ruleForm);
  if (!ruleFormRef.value) return;
  let flag = true;
  let objError = {} as any;
  await Promise.all([
    ruleFormRef.value.validate((e: any, fields: any) => {
      flag = flag ? e : false;
      if (!e) {
        objError = { ...objError, ...fields };
      }
    }),
  ]);
  if (!flag) {
    for (const key in ruleForm) {
      if (objError[key]) {
        ruleFormRef.value.scrollToField(key);
        break;
      }
    }
    return;
  }
  const form = { ...ruleForm };
  if (id) {
    // form.id = id;
    updateCecConfig(form).then((res: any) => {
      emit('clear-cache');
      back();
    });
  } else {
    saveCecConfig(form).then((res: any) => {
      emit('clear-cache');
      back();
    });
  }
};
</script>
